@fluentui/react-stylesheets
Advanced tools
React helpers for registering stylesheets contextually.
A library for contextually rendering css stylesheets to a particular target as components are used.
Stylesheet providing utilities for Fluent UI React
Typically when you use traditional webpack loaders to load css stylesheets, they often register styles into the document on component mount. This creates a few problems:
Child window scenarios. A child window is often rendered from the parent. When components render within the child window context, they need a contextual way to render their stylesheet within the parent.
Server side rendering. A component hierarchy is dynamically rendered on the server in a node session. Only stylesheets which are needed for the scenario should return.
This package contains utilities for rendering stylesheets to a given target using a contextual stylesheet provider. This allows us to render on demand when needed.
npm install @fluentui/react-stylesheets
In a component, provide stylesheets:
// Use a styling solution which allows you to pull the stylesheet as a string.
const stylesheet = `
.ms-Foo {
background: red;
}
`;
const Foo = () => {
useStylesheet(stylesheet);
return <div className="ms-Foo">I am foo</div>;
};
By default, the stylesheet will be rendered to the document head on component initialization. However, this allows style rendering to be finely controlled by a provider.
Use the target prop of StylesheetProvider to target a different document.
const childDocument = window.open().document;
const rootElement = childDocument.body.appendChild(childWindow.document.createElement('div'));
ReactDOM.render(
<StylesheetProvider target={childDocument}>
<App />
</StylesheetProvider>,
rootElement,
);
Use the renderStyles prop on the StylesheetProvider to provide an alternative function to render
styles.
getPage = () => {
const allStyles = [];
const renderStyles = styles => allStyles.push(...styles);
const html = React.renderToString(
<StylesheetProvider renderStyles={renderStyles}>
<Foo />
<StylesheetProvider>
);
return `
<html>
<head>
<title>Example</title>
<style>${allStyles.join('')}</style>
<head>
<body>
${html}
</body>
</html>
`;
}
Typical webpack style-loader style registration approach would dictate that styles would be
registered in module import order. This means leaf nodes end up registering styles first, then root elements.
Because React renders components root to child, stylesheet ordering gets reversed.
FAQs
React helpers for registering stylesheets contextually.
We found that @fluentui/react-stylesheets demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.